<!--用户管理 -->
<template>
    <div class="each-model">
        <!--<div class="page-nav">-->
            <!--<el-breadcrumb separator="/">-->
                <!--<el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-home" style="margin-right: 6px;"></i>文章列表</el-breadcrumb-item>-->
            <!--</el-breadcrumb>-->
        <!--</div>-->
        <div class="page-content">
            <div class="page-content-box">
                <!--<div class="page-content-header">-->
                    <!--<div class="model-title">-->
                        <!--<span>文章列表</span>-->
                    <!--</div>-->
                <!--</div>-->
                <div class="page-content-main" style="padding-top: 3px;">
                    <div class="model-content" style="padding-top: 3px;">

                        <el-row :gutter="20">
                            <el-col :span="24"  >
                                <el-carousel v-if="articleList.length>0" :interval="4000" arrow="always" height="560px" @change="showTitle()">
                                    <el-carousel-item v-for="(article,index) in articleList" :key="article">
                                        <div style="height: 430px;">
                                            <img :src="article.pictureUrl" class="image" style="height: 100%">
                                        </div>
                                        <div>
                                            <h3 style="text-align: center;padding: 10px;" @click="translate(article.id)">{{ article.pictureTitle }}</h3>
                                            <p v-html="article.pictureDes" @click="translate(article.id)"></p>
                                        </div>
                                    </el-carousel-item>
                                </el-carousel>

                            </el-col>
                        </el-row>
                        <br>
                        <!--<div style="text-align: center;">-->
                            <!--<paging v-bind:pagingInfo="pagingInfo" v-on:gotoPage="gotoPage"></paging>-->

                        <!--</div>-->
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">

    import Paging from '../common/Paging.vue'

    export default {
        name: 'agencyManage',
        data : function(){
            return {
                articleList:[],
                page:1,
                pagingInfo:{
                    totalPage:1,
                    page:1,
                    perPage:10,
                    total:0
                },
                currentPictureTitle: ""
            }
        },
        mounted:function(){
            this.getArticleList();
        },
        computed: {
        },
        methods: {
            translate:function(carticleId){
                var selectText=new String();
                if(document.selection){
                    selectText=document.selection();
                }else if(window.getSelection){
                    selectText=window.getSelection();
                }
                var selectedStr=selectText.toString();
                if(selectedStr.length>0){
                    var transForm={
                        english:selectedStr
                    };
                    var that=this;
                    this.$rsClient.post("/html/v1/chinese",transForm, function(result){
                        if(result && result.chinese){
                            that.$message({
                                showClose: true,
                                message: result.chinese,
                                type: 'success'
                            });
                            var newWordForm={
                                articleId:carticleId,
                                wordId:result.id
                            };
                            that.$rsClient.post("/html/v1/addOrUpdateWord",newWordForm, function(result){

                            });
                        }



                    });

                }
            },
            articleDetails:function(articleId){
                this.$router.push({
                    path:"/article/details",
                    query:{
                        id:articleId
                    }
                });
            },
            getArticleList:function(){
                var that=this;
                that.tableData=[];
                this.$rsClient.get("/html/v1/article/list?page="+this.page, function(result){
                    if(result.models){
                        that.articleList=result.models;
                    }
                    if(result.pagingInfo){
                        that.pagingInfo=result.pagingInfo;
                    }
                });
            },
            gotoPage:function(page){
                this.page=page;
                this.getArticleList();
            },
            showTitle:function (currentIndex,previousIndex) {
                if(currentIndex){
                    this.currentPictureTitle=this.articleList[currentIndex].pictureTitle;
                }
            }
        },
        components: {
            Paging
        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>
